<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-form ref="form" :inline="false" :model="form" label-width="80px">
            <el-card :body-style="{ padding: '20px' }" shadow="never">
                <div slot="header">
                    代金券管理
                </div>
                <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="名称"></el-input>
                    <hd-error name="name"/>
                </el-form-item>
                <el-form-item label="类别">
                    <el-radio v-model="form.type" label="normal">普通券</el-radio>
                    <el-radio v-model="form.type" label="exchangeable">可兑换券</el-radio>
                    <hd-error name="type"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="0">待激活</el-radio>
                        <el-radio :label="1">可使用</el-radio>
                        <el-radio :label="2">待兑换</el-radio>
                        <el-radio :label="3">已兑换</el-radio>
                        <el-radio :label="4">已失效</el-radio>
                    </el-radio-group>
                    <hd-error name="status"/>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input-number v-model="form.amount" :min="0" :step="100" size="mini"
                                     step-strictly></el-input-number>
                    <hd-error name="amount"/>
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-date-picker
                        v-model="form.overtime"
                        placeholder="选择日期时间"
                        type="datetime"
                        value-format="yyyy-MM-dd HH-mm-ss">
                    </el-date-picker>
                    <hd-error name="overtime"/>
                </el-form-item>
                <el-form-item label="商户选择">
                    <hd-alert :alert="{type:'success'}">商户名：{{ form.user_name }}</hd-alert>
                    <hd-userSelect v-model="form" :form="form" @update="updateuser">
                        选择商户
                    </hd-userSelect>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" placeholder="描述" rows="6" type="textarea"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-card>
        </el-form>

    </div>
</template>

<script>
import tabs from './tabs'

const form = {
    user_id: '', user_name: '', amount: '', type: 'normal', description: '', name: '', status: 0
}
export default {
    route: false,

    props: ['id'],
    data() {
        return {
            tabs,
            form,
            url: ''
        }
    },
    async created() {
        if (this.id) this.form = await this.axios.get(`admin/voucher/${this.id}`)
    },
    methods: {
        async onSubmit() {
            const url = this.id ? `admin/voucher/${this.id}` : `admin/voucher`
            await this.axios[this.id ? 'put' : 'post'](url, this.form)
            this.$router.push({name: 'admin.voucher.index'});
        },
        updateuser(user) {
            this.form.user_name = user.name
            this.form.user_id = user.id
        },
        async generateQr() {
            this.url = await this.axios.get(`mini/trade/voucher/${this.id}/showQr`)
        }
    }
}
</script>

<style>

</style>
